<script setup>
// 定义一个变量
let message = "zhangsan";
// 定义一个html
let htmlStr = `<h1>hello vue</h1>`;
// 定义一个变量 控制id属性
let id = 1;

// 定义一个变量，控制显示
let isButtonDisabled = false;

// 定义一个对象 包括了该标签的属性
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

let f = function () {
  // alert(1);
}


</script>

<!--子模版中只能有一个根元素-->
<template>
  <!--  文本插值-->
  <div>{{ message }}</div>
  <div>{{ objectOfAttrs.id }}</div>
  <!--html插值-->
  <div v-html="htmlStr"></div>
  <!--  text插值-->
  <div v-text="htmlStr"></div>

  <!--  <div id ="{{id}}">{{id}}</div>-->
  <div v-bind:id="id">{{ id }}</div>
  <!--  简化方式-->
  <div :id="id">{{ id }}</div>
  <!--  此方法仅支持3.4版本以上-->
  <div :id>{{ id }}</div>

  <!--  是否启用-->
  <button :disabled="isButtonDisabled">Button</button>
  <!--  绑定一个对象-->
  <div v-bind="objectOfAttrs">绑定对象</div>


  <!--  js表达式 一定只能放表达式 他的返回值就是一个值-->
  <div>{{ id + 1 }}</div>
  <div>{{ f() }}</div>

</template>

<!--scoped: 代表的是当前页面的样式生效 和其他页面互不影响-->
<style scoped>

</style>
